import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import styled from 'styled-components';
import {
  Button,
  Col,
  DatePicker,
  Descriptions,
  Drawer,
  Form,
  Input,
  Popconfirm,
  Row,
  Select,
} from 'antd';
import styles from '@/pages/Company/List/Create/index.less';
import { DivFooter, LFlexHDiv } from '@/components/MHtmlTag';
import { defDrawerWidth } from '@/defaultSettings';

const MBody = styled.div`
  .mForm {
  }

  ul {
    padding: 0;
  }

  li {
    cursor: pointer;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  li:hover {
    color: #24a6f2;
  }
`;

const InputDiv = styled.div`
  display: flex;
  width: 100%;
`;

const MLabel = styled.div`
  height: 40px;
  width: 150px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  justify-content: flex-end;
  padding-right: 8px;
`;

const LabelSpan = styled.span`
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
`;

const RequiredSpan = styled.span`
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
`;

/**
 * 输入组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const MFormInputItem = props => {
  const { fieldName = '', label = '', required = false, form, children } = props;
  const { getFieldDecorator } = form;
  return (
    <InputDiv>
      <MLabel>
        {required ? <RequiredSpan>*</RequiredSpan> : null}
        <LabelSpan>{label}:</LabelSpan>
      </MLabel>
      <Form.Item style={{ flex: '1' }}>
        {children
          ? fieldName != ''
            ? getFieldDecorator(fieldName, {
                rules: [{ required: required, message: label != '' ? `请输入${label}` : '' }],
              })(children)
            : children
          : null}
      </Form.Item>
    </InputDiv>
  );
};

const { TextArea } = Input;
const { Option } = Select;

@Form.create()
class Preview extends BaseComponent {
  render() {
    const { onClose, visible = false, form, record } = this.props;
    const { attachments } = record;

    const attachmentWidget = attachments ? (
      <ul>
        {attachments.map((item, index) => {
          const { filePath } = item;
          return (
            <li
              key={index}
              onClick={() => {
                if (filePath) {
                  window.open(filePath);
                }
              }}
            >
              {item.fileName}
            </li>
          );
        })}
      </ul>
    ) : null;
    return (
      <Drawer
        title="项目日志详情"
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        <MBody>
          <Descriptions bordered column={2}>
            <Descriptions.Item label="所属项目">{record.projectName}</Descriptions.Item>
            <Descriptions.Item label="记录日期">{record.recordDatetimeText}</Descriptions.Item>
            <Descriptions.Item label="工作内容" span={2}>
              {record.remarks}
            </Descriptions.Item>
            <Descriptions.Item label="明日计划内容" span={2}>
              {record.nextplan}
            </Descriptions.Item>
            <Descriptions.Item label="附件" span={2}>
              {attachmentWidget}
            </Descriptions.Item>
          </Descriptions>
          <DivFooter>
            <LFlexHDiv>
              <LFlexHDiv flex={'1'} justifyContent={'center'}>
                <Button
                  style={{
                    marginRight: 8,
                    width: '120px',
                  }}
                  onClick={() => {
                    if (onClose) {
                      onClose();
                    }
                  }}
                >
                  关闭
                </Button>
                <Popconfirm
                  title="确定执行当前操作吗?"
                  onConfirm={() => {
                    this.handleDelClick();
                  }}
                >
                  <Button type="danger" style={{ width: '120px' }}>
                    删除
                  </Button>
                </Popconfirm>
              </LFlexHDiv>
            </LFlexHDiv>
          </DivFooter>
        </MBody>
      </Drawer>
    );
  }

  /**
   * 处理提交操作
   * @param e
   */
  handleDelClick = () => {
    const { onDel } = this.props;
    if (onDel) {
      onDel(this.props.record.id);
    }
  };
}

export default Preview;
